<template>
    <div class="app-container">
        <el-row>
            <el-button type="primary" plain icon="el-icon-plus" @click="addInsuranceType"
                style="margin-bottom: 20px">添加</el-button>
        </el-row>
        <el-table ref="table" :data="tableData">
            <el-table-column align="center" prop="contactName" label="姓名"> </el-table-column>
            <el-table-column align="center" prop="contactMail" label="邮件"> </el-table-column>
            <el-table-column align="center" prop="contactType" label="场景类别">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.contactType === '1'" type="success">投保短信通知</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="contactType" label="启用状态">
                <template slot-scope="scope">
                    <el-switch :value="scope.row.enableStatus == '1'" @change="enableStatusChange(scope.row)"
                        active-color="#13ce66" inactive-color="#ff4949">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="editMsg(scope.row)">修改</el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete"
                        @click="delMsg(scope.row.contactMailId)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :title="msgTitle" :visible.sync="dialogVisible" width="40%">
            <el-form :model="addForm" ref="addForm" :rules="rules" label-width="140px">
                <el-form-item label="姓名" style="width: 100%" prop="contactName">
                    <el-input v-model="addForm.contactName" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item label="邮件" style="width: 100%" prop="contactMail">
                    <el-input v-model="addForm.contactMail" placeholder="邮件"></el-input>
                </el-form-item>
                <el-form-item label="场景类别" style="width: 100%" prop="contactType">
                    <el-select v-model="addForm.contactType">
                        <el-option label="投保短信通知" value="1"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cance">取 消</el-button>
                <el-button type="primary" @click="determine">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            msgTitle: "添加",
            editId: "",
            addForm: {
                contactName: "",
                contactMail: "",
                contactType:'1'
            },
            dialogVisible: false,
            // form: {
            //     user: '',
            //     region: ''
            // },
            tableData: [],
            tableHeight: 0,
            rules: {
                contactName: [
                    { required: true, message: "请输入姓名", trigger: "blur" },
                ],
                contactMail: [
                    { required: true, message: "请输入邮件", trigger: "blur" },
                ]
            },
        };
    },
    methods: {
        enableStatusChange(row) {
            const params = {
                contactMailId: row.contactMailId
            }
            if (row.enableStatus == '0') {
                this.$post(`/config/contactmail/enable`, params).then((res) => {
                    if (res && res.code * 1 === 200) {
                        this.$message({
                            type: "success",
                            message: "启用成功!",
                        });
                        this.getTableData();
                    }
                });
            } else {
                this.$post(`/config/contactmail/disable`, params).then((res) => {
                    if (res && res.code * 1 === 200) {
                        this.$message({
                            type: "success",
                            message: "禁用成功!",
                        });
                        this.getTableData();
                    }
                });
            }

        },
        determine() {
            this.$refs.addForm.validate((valid) => {
                if (valid) {
                    const url = this.editId ? "config/contactmail" : "config/contactmail";
                    const func = this.editId ? "$put" : "$post";
                    const params = this.editId
                        ? { ...this.addForm, contactMailId: this.editId }
                        : this.addForm;
                    this[func](url, params).then((res) => {
                        if (res && res.code * 1 === 200) {
                            this.$message({
                                type: "success",
                                message: this.editId ? "修改成功" : "新增成功",
                            });
                            this.$refs.addForm.resetFields();
                            this.dialogVisible = false;
                            this.getTableData();
                        }
                    });
                }
            });
        },
        delMsg(contactMailId) {
            this.$confirm("是否确认删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$delete(`/config/contactMail/${contactMailId}`).then((res) => {
                        if (res && res.code * 1 === 200) {
                            this.$message({
                                type: "success",
                                message: "删除成功!",
                            });
                            this.getTableData();
                        }
                    });
                })
                .catch(() => {
                    //
                });
        },
        cance() {
            this.$refs.addForm.resetFields();
            this.dialogVisible = false;
        },
        addInsuranceType() {
            this.$nextTick(() => {
                this.msgTitle = "添加";
                this.dialogVisible = true;
                this.addForm.contactName = "";
                this.addForm.contactMail = "";
                this.addForm.contactType = "";
                this.editId = "";
            });
        },
        editMsg(row) {
            this.$nextTick(() => {
                this.msgTitle = "修改";
                this.dialogVisible = true;
                this.addForm.contactName = row.contactName;
                this.addForm.contactMail = row.contactMail;
                this.addForm.contactType = row.contactType;
                this.editId = row.contactMailId;
            });
        },
        getTableData() {
            this.$get("/config/contactmail/list").then((res) => {
                this.tableData = res.data;
            });
        },
    },
    mounted() {
        this.getTableData();
    },
};
</script>
<style scoped lang="scss">
.form-inline ::v-deep {
    width: 100%;

    .el-form-item__label {
        // padding: 0;
    }
}
</style>